import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import {Form, Input, Modal, Button} from 'antd';
import {Row, Col, Space, Tag} from 'antd';
import styles from './index.less'

const FormItem = Form.Item;
const {TextArea} = Input;

@connect(({submit, loading}) => ({
  submit,
  loading: loading.models.submit,
}))
class SubmitForm extends PureComponent {
  formRef = React.createRef();

  state = {
    chars_sum: 0,
    sum: 0,
    submit_loading: false,
    modalvisible:false,
    order_number: ''
  }

  componentDidMount() {
    let url = window.location.host
    const {dispatch} = this.props
    dispatch({
      type: 'submit/shop',
      payload: {
        domain: url.split('.')[0]
      }
    })
  }

  onSubmitArticle = value => {
    let url = window.location.host
    this.state.order_number = value.order_number
    const {dispatch} = this.props;
    this.setState({
      submit_loading: true
    })
    dispatch({
      type: 'submit/submit',
      payload: {
        ...value,
        chars_sum: this.state.chars_sum,
        sum: this.state.sum,
        domain: url.split('.')[0]
      },
      callback: response => {
        if(response.error_code === 0){
          this.setState({
            modalvisible: true,
          })
        }
        this.setState({
          submit_loading: false,
        })
      }
    });
  }

  onCalculate = (e) => {
    let content = e.target.value;
    this.setState({
      chars_sum: content.length,
      sum: Math.ceil((content.length / 10000))
    })
  };

  handleOk = e => {
    let number = ''
    if(this.state.order_number.indexOf(',')!==-1){
      number = this.state.order_number.split(',')[0]
    }else{
      number = this.state.order_number
    }
    this.setState({
      modalvisible: false,
    });
    this.props.history.push("/search", {
      order_number: number
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      modalvisible: false,
    });
  };

  onReset = () => {
    this.formRef.current.resetFields();
  };

  render() {
    const {chars_sum, sum} = this.state;
    const {submit: {shop}} = this.props
    const formItemLayout = {
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 24},
      },
    };
    return (
      <div>
        <Form ref={this.formRef} onFinish={this.onSubmitArticle} className={styles.container} {...formItemLayout}
              name="submit" hideRequiredMark>
          <Row>
            <Col xs={24} sm={16}>
              <FormItem
                name={'title'}
                label="文章标题"
                rules={[{required: true, message: "请填写文章标题"}]}>
                <Input/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col xs={24} sm={8}>
              <FormItem name={'author'} label="文章作者">
                <Input/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem name={'content'} label="检测内容" rules={[
                {
                  required: true,
                  message: "请输入检测内容"
                },
                {
                  min: 100,
                  max: 100000,
                  message: '请最少输入100字,最大不超过10万字!'
                }
              ]}>
                <TextArea
                  autoSize={{minRows: 10, maxRows: 20}}
                  onChange={this.onCalculate}
                />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col xs={24} sm={{span: 8, offset: 16}}>
              <span>共输入 </span>
              <span style={{color: 'red'}}>{chars_sum}</span>
              <span> 字，</span>
              <span>需要购买 </span>
              <span style={{color: 'red'}}>{sum}</span>
              <span> 单 。</span>
              <a href={shop} target="_blank">(订单不够？点我加购!)</a>
            </Col>
          </Row>
          <Row>
            <Col xs={24} sm={14}>
              <FormItem name={'order_number'} label="淘宝订单编号" rules={
                [
                  {
                    pattern: /^\d{18,19}(,\d{18,19})*$/,
                    message: '订单号格式不正确,应为18或19位数字,不可包含空格,若有多个订单请用英文逗号分隔!'
                  },
                  {
                    required: true,
                    message: '请填写淘宝订单编号'
                  }
                ]
              }>
                <Input/>
              </FormItem>
            </Col>
          </Row>
          <Row gutter={4}>
            <Col sm={{span: 8, offset: 16}} xs={24}>
              <FormItem wrapperCol={{...formItemLayout.wrapperCol}}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={this.state.submit_loading}>
                    提交论文
                  </Button>
                  <Button onClick={this.onReset}>
                    重置
                  </Button>
                </Space>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <Modal
          title="提交成功！"
          cancelText={'不用了'}
          okText={'好的'}
          visible={this.state.modalvisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>论文已提交检测,预计需10-20分钟,现在去查询页获取检测报告吗?</p>
        </Modal>
      </div>
    );
  }
}

export default SubmitForm
